<template>
    <div>
        <layout-box one="商品管理" two="添加商品">
            <!-- 消息提示框 -->
            <el-alert title="添加商品信息" type="info" center show-icon 
            :closable="false">
            </el-alert>
             <!-- 步骤条 -->
            <el-steps :space="200" :active="activeIndex -0" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="商品完成"></el-step>
            </el-steps>
             <!-- 表单 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-position="top">
                 <!-- tab栏 -->
                <el-tabs :tab-position="'left'" v-model="activeIndex" 
                    :before-leave="beforeTabLeave"  @tab-click="tabClicked">
                    <el-tab-pane label="基本信息" name="0">
                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="addForm.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格" prop="goods_price">
                            <el-input v-model="addForm.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量" prop="goods_weight">
                            <el-input v-model="addForm.goods_weight"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量" prop="goods_number">
                            <el-input v-model="addForm.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类" prop="goods_cat">
                            <el-cascader v-model="addForm.goods_cat" :options="cateList"
                               :props="cateProps"
                               @change="handleChange">
                            </el-cascader>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品参数" name="1">
                        <el-form-item :label="item.attr_name" v-for="(item,i) in manyTableData" :key="i">
                            <!-- <el-tag effect="plain" v-for="(sublitem,i1) in item.attr_vals" :key="i1">
                                {{sublitem}}
                            </el-tag> -->
                            <el-checkbox-group v-model="item.attr_vals" >
                                <el-checkbox :label="sublitem" v-for="(sublitem,i1) in item.attr_vals" :key="i1" border size="mini"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品属性" name="2">
                        <el-form-item :label="item.attr_name" v-for="(item,i) in onlyTableData" :key="i">
                            <el-input v-model="item.attr_vals"></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品图片" name="3">
                        <el-upload
                            :action="uploadURL"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :headers="headerObj"
                            list-type="picture"
                            :on-success="handleSuccess"
                            >
                       <el-button size="small" type="primary">点击上传</el-button>
                       </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="商品内容" name="4">
                        <!-- 富文本编辑器 -->
                        <quill-editor v-model="addForm.goods_introduce">
                        </quill-editor>
                        <!-- 添加商品 -->
                        <el-button type="primary" @click="add" class="btnAdd">添加商品</el-button>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </layout-box>
        <!-- 图片预览 -->
        <el-dialog
            title="图片预览"
            :visible.sync="previewDialogVisible"
            width="50%"
           >
           <img :src="previewPath" alt="" style="width:100%">
        </el-dialog>
    </div>
</template>
<script>
import { log } from 'util'
import _ from 'lodash'
export default {
   data() {
      return {
          activeIndex:'0',
         //添加商品的表单 
          addForm:{
              goods_name:'',
              goods_price:10,
              goods_weight:10,
              goods_number:10,
              goods_cat:[],
              pics:[],
              goods_introduce:'',
              attrs:[]
          },
        //验证表单规则对象
        addFormRules:{
           goods_name:[
               {required:true,message:'请输入商品名称',trigger: 'blur'}
           ],
           goods_price:[
               {required:true,message:'请输入商品价格',trigger: 'blur'}
           ],
           goods_weight:[
               {required:true,message:'请输入商品重量',trigger: 'blur'}
           ],
           goods_number:[
               {required:true,message:'请输入商品数量',trigger: 'blur'}
           ],
           goods_cat:[
               {required:true,message:'请选择商品分类',trigger: 'blur'}
           ],
        },
        // 商品分类
        cateList:[],
        cateProps:{
            expandTrigger:'hover',
            value:'cat_id',
            label:'cat_name',
            children:'children'
        },
        manyTableData:[],
        onlyTableData:[],
        // 图片上传的请求路径
        uploadURL:'http://127.0.0.1:8888/api/private/v1/upload',
        //为upload组件绑定header请求头
        headerObj:{
            Authorization:window.sessionStorage.getItem('token')
        },
        // 控制图片预览对话框的显示与隐藏
       previewDialogVisible:false,
       //预览图片的请求地址
       previewPath:''    
      }
   },
   created(){
       this.getCateList()
   },
   computed: {
       cateId(){
           if(this.addForm.goods_cat.length===3){
               return this.addForm.goods_cat[2]
           }else{
               return null
           }
       }
   },
   methods:{
       async getCateList(){
           const {data:res}=await this.$http.get('categories')
        //    console.log(res);
           if(res.meta.status!==200) return this.$message.error('获取商品分类失败')
           this.cateList=res.data
           console.log(this.cateList);  
       },
       handleChange(){
           console.log(this.addForm.goods_cat);
        //只允许选中三级分类
           if(this.addForm.goods_cat.length!==3){
               return this.addForm.goods_cat=[]
           }  
       },
       beforeTabLeave(activeName,oldactiveName){
        //    console.log('即将要离开的标签页的名字是：'+oldactiveName)
        //    console.log('即将要进入的标签页的名字'+activeName)
        if(this.activeIndex==='0'&& this.addForm.goods_cat.length!==3){
          this.$message.error('请选择三级分类菜单')
          return false
         }
       },
     //点击切换tab栏触发事件的处理函数   
       async tabClicked(){
        //console.log(this.activeIndex)
        if(this.activeIndex==='1'){
            // console.log('动态参数面板');
            // console.log(this.cateId);
            // 获取参数列表
            const {data:res}=await this.$http.get(`categories/${this.cateId}/attributes`,{
                params:{sel:'many'}
            }) 
            // console.log(res);
             if(res.meta.status!==200) return this.$message.error('获取动态参数列表失败')
             res.data.forEach(item=>{
                //  console.log(item);
                item.attr_vals=item.attr_vals?item.attr_vals.split(','):[] 
             })
             this.manyTableData=res.data
             console.log(this.manyTableData);    
        }else if(this.activeIndex==='2'){
            const {data:res}=await this.$http.get(`categories/${this.cateId}/attributes`,{
                params:{sel:'only'}
            }) 
            // console.log(res);
             if(res.meta.status!==200) return this.$message.error('获取静态属性列表失败')
             this.onlyTableData=res.data
             console.log(this.onlyTableData);
        }
       },
    //处理图片预览效果
      handlePreview(file){
          this.previewDialogVisible=true
          console.log(file);
          this.previewPath=file.response.data.url
          console.log(this.previewPath);
          

      },
    //移除图片的操作
      handleRemove(file){
    //  1.获取将要删除的图片的临时路径
     console.log(file);
    
    // 2.从pics数组中，找到这个图片对应的索引值
    const picIndex=this.addForm.pics.findIndex(item=>{
        item.pic===file.response.data.tmp_path
    })
    // 3.调用splice方法把图片信息从pics数组中移除
    this.addForm.pics.splice(picIndex,1)
    console.log(this.addForm);
    
     },
    //监听图片上传成功的处理函数
    handleSuccess(response){
    // console.log(response);
    if(response.meta.status!==200) return this.$message.error('图片上传失败')
    //1.拼接得到一个图片信息对象
     const picInfo={pic:response.data.tmp_path}
    // 2.将图片信息push到pics数组中
    this.addForm.pics.push(picInfo)
    console.log(this.addForm);
    },
    //点击添加商品按钮的处理函数
    add(){
        // console.log(this.addForm);
        this.$refs.addFormRef.validate(async valid=>{
            if(!valid) return this.$message.error('请填写必要的表单项')
            // 执行添加的业务逻辑
            // 利用lodash 进行深拷贝
            const form =_.cloneDeep(this.addForm)
            form.goods_cat=form.goods_cat.join(',')
            // console.log(form)
            // 处理动态参数
            this.manyTableData.forEach(item=>{
                const newInfo={
                    attr_id:item.attr_id,
                    attr_value:item.attr_vals.join(',')
                 }
                 this.addForm.attrs.push(newInfo)  
            })
            // console.log(form);
            // 处理静态属性
           this.onlyTableData.forEach(item=>{
                const newInfo={
                    attr_id:item.attr_id,
                    attr_value:item.attr_vals
                 }
                 this.addForm.attrs.push(newInfo)  
            })
            form.attrs=this.addForm.attrs
             console.log(form);
            // 执行添加商品
            const {data:res}=await this.$http.post('goods',form)
            console.log(res);
            
            if(res.meta.status!==201) return this.$message.error('添加商品失败')
            this.$message.success('添加商品成功')
            this.$router.push('/goods')             
        })
        
    }
   }
}
</script>
<style lang='less' scoped>
.el-checkbox{
    margin:0 5px 0!important;
}
.btnAdd{
    margin-top:15px
}

</style>
